<script setup lang="ts">
import {ref} from 'vue'
import '@/assets/iconfont/iconfont.css'
const props = defineProps<{
  guess:string[]
}>()
const rotation = ref(0)
console.log(props.guess)
const emit = defineEmits(['onClear','onClickGuess'])

const onClear = ()=>{
  emit('onClear')
  rotation.value += 180
}
</script>
<template>
  <div class="top">
    <div class="title">
      猜你喜欢
    </div>
    <span class="iconfont icon-shuaxin icon"
     @click="onClear"  
     :style="{ transform: `rotate(${rotation}deg)` }"
     ></span>
  </div>

  <div class="list">
    <span class="item" v-for="item in guess" :key="item" @click="emit('onClickGuess',item)"> {{ item }}</span>
  </div>
</template>


<style lang="scss" scoped>
.top {
  padding: 0 3vw;
  background-color: transparent;
  width: 100%;
  height: 10vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.icon {
  color: #fff;
  font-size: 6vw;
  transition: transform 0.3s ease; /* 添加过渡效果 */
  cursor: pointer;// 鼠标效果
}

.title {
  color: #fff;
  font-size: 4vw;
}

.list {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  max-width: 100%;
}

.item {
  color: #fff;
  display: inline-block;
  font-size: 4vw;
  background-color: #303030;
  padding: 1vw 3vw;
  margin: 0 2vw;
  border-radius: 5vw;
  margin-bottom: 3vw;
}

</style>